<template>
  <view class="content">
    <image class="homeBack" src="@/static/image/payment/back.png"></image>
    <view class="head flexD-c">
      <image src="@/static/image/payment/checkmark.png"></image>
      <text class="title">支付成功</text>
      <text class="money">支付：¥{{ constData.actual_amount }}</text>
      <view class="btn_list flex">
        <view @click="fanhuiback()" class="return">返回</view>
        <view @click="confirm(orderid)" class="confirm">确认</view>
      </view>
    </view>
    <view class="bottom">
      <view class="commodity flex">
        <image :src="constData.applet_image[0]"></image>
        <view class="comm_text">
          <view class="title flex-b">
            <view class="text-over2">{{ constData.product_name }}</view>
            <text>¥{{ constData.actual_amount }}</text>
          </view>
          <view class="subtitle flexC">
            <view class="label flex-c"> 未预约</view>
            <text>可预约次数：{{ 1 }}次</text>
          </view>

          <view class="button_make flex">
            <view @click.stop="getPopUp()" class="btn flex-c">点击预约</view>
          </view>
        </view>
      </view>

      <view class="guide">
        <view class="title">如暂不预约，需要服务可以通过以下方式</view>
        <view class="icon">
          <view class="icon_item flexD-c">
            <image mode="aspectFit" src="@/static/image/payment/dy.png"></image>
            <text>抖音APP</text>
          </view>
          <image class="arrow" src="@/static/image/payment/arrow.png"></image>
          <view class="icon_item flexD-c">
            <image mode="aspectFit" src="@/static/image/payment/my.png"></image>
            <text>「我」</text>
          </view>
          <image class="arrow" src="@/static/image/payment/arrow.png"></image>
          <view class="icon_item flexD-c">
            <image mode="aspectFit" src="@/static/image/payment/more.png"></image>
            <text>「更多」</text>
          </view>
          <image class="arrow" src="@/static/image/payment/arrow.png"></image>
          <view class="icon_item flexD-c">
            <image mode="aspectFit" src="@/static/image/payment/order.png"></image>
            <text>「我的订单」</text>
          </view>
          <image class="arrow" src="@/static/image/payment/arrow.png"></image>
          <view class="icon_item flexD-c">
            <image mode="aspectFit" src="@/static/image/payment/use.png"></image>
            <text>「去使用」</text>
          </view>
        </view>
      </view>
    </view>
    <view class="tankuang">
      <uv-popup round="10" overlay="true" :closeOnClickOverlay="false" ref="popup">
        <view class="popup flexD-c">
          <text class="pay">支付成功</text>
          <view class="xhftb">
            <image class="yuan" src="@/static/image/home/logo.jpg"></image>
          </view>
          <view class="wenzi">
            <view class="tis">{{ constData.warnTps }}</view>
            <view class="make">订单已经支付成功,现在就可以去预约服务上门啦！</view>
          </view>
          <view @click.stop="getlogin()" class="btns">立即预约</view>
          <view @click.stop="getlogin()" class="btnsa">先囤着，以后再说></view>
        </view>
      </uv-popup>
    </view>
  </view>
</template>
<script>
import { getGoodsDetails } from "@/api/home.js";
import { userInfoData } from "@/api/user.js"
export default {
  data() {
    return {
      id: null,
      constData: {},
      orderid: null,
      mobile: ""
    };
  },
  methods: {
    goodsDetails() {
      getGoodsDetails({
        id: this.id,
      }).then((res) => {
        if (res.code == 1) this.constData = res.data;
      });
    },
    getlogin() {
      if (this.mobile == "") {
        uni.redirectTo({ url: '/pages/login/login?id=' + this.orderid })
      } else {
        uni.redirectTo({ url: '/pages/reservation/reservation?id=' + this.orderid })
      }

    },
    getPopUp() {
      this.$refs.popup.close()
      uni.redirectTo({
        url: "/pages/reservation/reservation?id=" + this.orderid,
      });
    },
    getinfo() {
      userInfoData().then(res => {
        if (res.code === 1) {
          this.mobile = res.data.mobile
        }
      })
    },
    fanhuiback() {
      uni.navigateBack();
    },
    confirm(orderid) {
      uni.redirectTo({
        url: '/pages/orderDetails/orderDetails?id=' + orderid
      });
    },
  },
  onLoad(options) {
    this.orderid = options.orderid
    this.id = options.id
    this.getinfo()
  },
  onShow() {
    this.goodsDetails();
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.popup.open()
    });
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: 100vh;
  background: #fefcf3;

  .homeBack {
    position: absolute;
    top: 0;
    width: 100%;
    height: 491rpx;
  }

  .head {
    z-index: 9;
    position: relative;
    color: #ffffff;
    height: 491rpx;

    image {
      width: 116rpx;
      height: 116rpx;
      margin-bottom: 40rpx;
      margin-top: 39rpx;
    }

    .title {
      letter-spacing: 6rpx;
      font-size: 36.08rpx;
      margin-bottom: 28rpx;
    }

    .money {
      letter-spacing: 6rpx;
      font-size: 27.21rpx;
    }

    .btn_list {
      margin-top: 57rpx;
      display: flex;
      column-gap: 33rpx;

      .return,
      .confirm {
        font-size: 27rpx;
        padding: 21rpx 74rpx;
        border: 2px solid #ffffff;
        border-radius: 32rpx;
        background: #fb9a1f;
      }

      .confirm {
        background: #ffffff;
        color: #fb9a1f;
      }
    }
  }

  .flexD-c {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bottom {
    background: #ffffff;
    margin-top: 18rpx;
    padding: 0 34rpx;

    .commodity {
      background-color: #ffffff;
      display: flex;
      padding: 27rpx;

      image {
        width: 152rpx;
        height: 152rpx;
        margin-right: 25rpx;
      }

      .comm_text {
        color: #1c2023;
        flex: 1;

        .title {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .text-over2 {
            font-size: 29.27rpx;
            color: #1c2023;
            letter-spacing: 6rpx;
          }

          text {
            font-size: 23rpx;
          }
        }

        .subtitle {
          margin-top: 36rpx;
          display: flex;
          align-items: center;

          .label {
            width: 80rpx;
            height: 29rpx;
            border-radius: 5rpx;
            border: 1px solid #ff8104;
            margin-right: 10rpx;
            color: #ff8104;
            font-size: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          text {
            font-size: 26rpx;
            color: #1c2023;
            letter-spacing: 6rpx;
          }
        }

        .button_make {
          justify-content: flex-end;
          margin-top: 40rpx;
          display: flex;

          .btn {
            width: 155rpx;
            height: 50rpx;
            background: #ff8104;
            border-radius: 25rpx;
            font-size: 26rpx;
            letter-spacing: 6rpx;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }

    .guide {
      background-color: #ffffff;
      padding: 26rpx;
      margin-top: 26rpx;

      .title {
        color: #1c2023;
        font-size: 26rpx;
      }

      .icon {
        margin-top: 50rpx;
        display: flex;
        justify-content: space-between;

        .icon_item {
          color: #1c2023;
          font-size: 20rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          image {
            width: 30rpx;
            height: 30rpx;
            margin-bottom: 17rpx;
          }
        }

        .arrow {
          width: 11rpx;
          height: 12rpx;
          margin-top: 20rpx;
        }
      }
    }
  }

  .tankuang {
    .popup {
      background-image: url(../../static/image/make/backxhf.png);
      background-size: cover;
      background-repeat: no-repeat;
      width: 570rpx;

      .xhftb {
        display: inline-block;
        overflow: hidden;

        image {
          width: 146rpx;
          height: 146rpx;
          margin: 28rpx 212rpx 28rpx;
          border-radius: 50%;
        }
      }

      .pay {
        font-size: 35rpx;
        margin-top: 26rpx;
        letter-spacing: 6rpx;
        font-weight: bold;
      }

      .wenzi {
        font-size: 34rpx;
        letter-spacing: 6rpx;
        padding: 0 16rpx;
        font-weight: bold;

        .tis {
          color: red;
          font-size: 34rpx;
          margin: 8rpx 0;
          font-weight: bold;
        }
      }


      .btns {
        width: 380rpx;
        height: 90rpx;
        background: #ff8104;
        border-radius: 37rpx;
        font-weight: bold;
        color: #ffffff;
        font-size: 44rpx;
        text-align: center;
        margin-top: 44rpx;
        letter-spacing: 6rpx;
        line-height: 90rpx;
      }

      .btnsa {
        font-size: 24rpx;
        margin-top: 24rpx;
        color: #cbcbcb;
        margin-bottom: 36rpx;
      }
    }
  }
}
</style>
